<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>alignContent属性</title>
  <style>
    .dstart,.dend,.dcenter,.dbetween,.daround,.dstretch {
      width: 100%;
      height: 400px;
      background-color: orange;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .dcenter {
      align-content: center;
    }
    .dbetween {
      align-content: space-between;
    }
    .dend {
      align-content: flex-end;
    }
    .daround {
      align-content: space-around;
    }
    .dstretch {
      align-content: stretch;
    }
    .d1,.d2,.d3 ,.d4,.d5{
      width: 600px;
      /*height: 100px;*/
      background-color: lightblue;
      margin-right: 5px;
      border: 1px solid red;
      /*margin-bottom: 5px;*/
    }
  </style>
</head>
<body>
  <h1>1. alignContent: 如果有多行盒子在交叉轴上的对齐方式 <hr size="3" color="red"></h1>
  <h3>1.1 alignContent: flex-start（在交叉轴的起点方向）<hr></h3>
  <div class="dstart">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.2 alignContent: flex-end（在交叉轴的终点方向）<hr></h3>
  <div class="dend">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.3 alignContent: center（在交叉轴的居中位置）<hr></h3>
  <div class="dcenter">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.4 alignContent: space-between（在交叉轴的两端对齐）<hr></h3>
  <div class="dbetween">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.5 alignContent: space-around（在交叉轴的环绕对齐，中间盒子间距是盒子与边框间距的两倍）<hr></h3>
  <div class="daround">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.6 alignContent: stretch（在交叉轴的环绕对齐，拉伸与交叉轴高度一样）<hr></h3>
  <div class="dstretch">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
</body>
</html>
